<template>
	<div class="Agency">
		<div class="Rule-head">
			<div></div>
			<div class="head-title">代理抽成规则</div>
		</div>
		<!-- 代理抽成 -->
		<el-button icon="el-icon-circle-plus" round @click="addGuize">添加</el-button>
		<!-- 列表 -->
		<el-table :data="list" border style="width: 90%">
			<el-table-column prop="name" label="名称">
			</el-table-column>
			<el-table-column prop="scale" label="分成比例(%)">
			</el-table-column>
			<el-table-column prop="pri" label="价格">
			</el-table-column>
			<el-table-column prop="level" label="等级">
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="primary" plain
						@click="editRule(scope.$index)"
					>编辑</el-button>
					<el-button
						size="mini"
						type="danger" plain
						@click="deleted(scope.$index)"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 规则编辑对话框 -->
		<el-dialog title="规则修改" :visible.sync="dialogFormVisible" width="35%" @close="quxiaoRevise">
			<el-form :model="form" v-loading="formloading">
				<el-form-item label="名称" label-width="20%">
					<el-input style="width:80%" v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="分成比例" label-width="20%">
					<el-input style="width:80%" v-model="form.scale" autocomplete="off"></el-input>%
				</el-form-item>
				<el-form-item label="价格" label-width="20%">
					<el-input style="width:80%" v-model="form.pri" autocomplete="off"></el-input>元
				</el-form-item>
				<el-form-item label="等级" label-width="20%">
					<el-input style="width:80%" v-model="form.level" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="quxiaoRevise">取 消</el-button>
				<el-button type="primary" @click="toRevise">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name:'Agency',
		data(){
			return{
				list:[],
				dialogFormVisible:false,
				form:{
					name:'',
					scale:'',
					pri:'',
					level:''
				},
				formloading:false
			}
		},
		methods:{
			addGuize(){
				this.dialogFormVisible = true;
			},
			deleted(x){
				var ruleId = this.list[x].id;
				this.$confirm('删除该规则, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post('deletedRule',{ruleId}).then((data)=>{
						if(data.data.success){
							this.$message({
								type: 'success',
								message: data.data.msg,
								offset:'65',
								duration:1000
							});
							this.getList();
						}else{
							this.$message.error(data.data.msg)
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
						offset:'65',
						duration:1000
					});          
				});
			},
			getList(){
				this.$http.get('getRuleShareList').then((data)=>{
					var num = data.data.msg.length;
					if(data.data.success){
						// if ( num>1 ) this.$message({
						// 	showClose: true,
						// 	message: data.data.msg,
						// 	type: 'success',
						// 	offset:'65',
						// 	duration:1000
						// });
						this.list = data.data.data.list;
					}else{
						if ( num>1 ) this.$message({
							showClose: true,
							message: data.data.msg,
							type: 'error',
							offset:'65',
							duration:1000
						});
					}
				})
			},
			editRule(x){
				this.form = this.list[x];
				this.dialogFormVisible = true;
			},
			toRevise(){
				this.formloading = true;
				this.$http.post('ruleReviseAdd',this.form).then((data)=>{
					if(data.data.success){
						this.$message({
							type: 'success',
							message: data.data.msg,
							offset:'65',
							duration:1000
						});
						this.getList()
					}else{
						this.$message.error(data.data.msg)
					}
					this.formloading = false;
					this.dialogFormVisible = false;
					this.form={
						name:'',
						scale:'',
						pri:'',
						level:''
					}
				})
			},
			quxiaoRevise(){
				this.dialogFormVisible = false;
				this.form={
					name:'',
					scale:'',
					pri:'',
					level:''
				}
			}
		},
		created(){
			this.getList()
		}
	}
</script>

<style scoped>
	.Agency>.el-button{
		background-color: #1870FF;
		color: #FFFFFF;
	}
	.el-table{
		margin-top: 20px;
	}

	.Rule-head{
		height: 30px;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}
	.Rule-head>div:nth-child(1){
		width: 4px;
		height: 20px;
		background-color: #2ad199;
		margin-right: 10px;
	}
</style>
